/**
 * @Author: likang xie
 * @Date: 2019-11-09 11:50:59
 * @Usage: 常用组件样式
 */

// 头部
.uni-header {
  position: fixed;
  left: 0;
  top: var(--window-top);
  width: 100%;
  z-index: 10;

  &.uni-header-sticky {
    position: sticky;
  }
}

// 底部
.uni-footer {
  position: fixed;
  left: 0;
  bottom: var(--window-bottom);
  width: 100%;
  height: 100upx;
  line-height: 100upx;
  z-index: 10;
}

// 全屏
.uni-full-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 11;
}

// 遮罩
.uni-mask {
  @extend .uni-full-screen;
  background-color: $color-mask;
}

// 头像
.uni-avatar {
  image {
    display: block;
    width: 60upx;
    height: 60upx;
    border-radius: 50%;
    background-color: $color-default;
  }

  &.uni-avatar-sm {
    image {
      width: 40upx;
      height: 40upx;
    }
  }

  &.uni-avatar-lg {
    image {
      width: 80upx;
      height: 80upx;
    }
  }
}

// 按钮
.uni-button {
  display: inline-block;
  padding: 10upx 30upx;
  border: 2upx solid transparent;
  color: $color-white;
  background-color: $color-main;
  font: inherit;
  @extend .radius;

  &.uni-button-clear {
    padding: 0;
    background-color: transparent;
    color: $color-black;
  }

  &.uni-button-radius {
    border-radius: 100upx;
  }

  &.uni-button-full {
    display: block;
    width: 100%;
    height: 100%;
  }

  &.uni-button-sm {
    padding: 10upx 30upx;
    font-size: 24upx;
  }

  &.uni-button-lg {
    padding: 26upx 30upx;
  }

  &.uni-button-unfill {
    color: $color-main;
    background-color: $color-white;
    border: 2upx solid $color-main;
  }

  &.uni-button-disalbed,
  &[disabled] {
    color: $color-white !important;
    background-color: $color-disabled !important;
  }

  &.button-hover {
    filter: brightness(0.8);
  }

  &::after {
    display: none !important;
  }
}

// 菜单九宫格
.uni-grids {
  display: flex;
  flex-wrap: wrap;

  .uni-grids-item {
    width: 25%;
    padding: 20upx;
    text-align: center;

    image {
      width: 80upx;
      height: 80upx;
    }
  }
}

// 消息小点
.uni-dot {
  position: absolute;
  top: 10upx;
  right: 20upx;
  width: 16upx;
  height: 16upx;
  background-color: $color-warning;
  border: 2upx solid $color-white;
  @extend .circle;
  z-index: 5;

  &.uni-dot-red {
    background-color: $color-danger;
    border-color: $color-danger;
  }
}

// 标签
.uni-tag {
  display: inline-block;
  padding: 2upx 15upx;
  color: $color-warning;
  border: 2upx solid $color-warning;
  margin-top: 10upx;
  font-size: 24upx;
  @extend .radius;

  &:not(:last-child) {
    margin-right: 10upx;
  }

  &:empty {
    display: none;
  }
}

// VIP标签
.uni-vip {
  padding: 0 15upx;
  color: $color-white;
  background-color: $color-main;
  border-radius: 40upx;
  border-bottom-left-radius: 0;
  font-size: 24upx;

  &::after {
    content: "VIP";
  }
}

// 左边有红色边框的标题
.uni-title {
  font-size: 40upx;
  font-weight: bold;

  &::before {
    content: "";
    display: inline-block;
    width: 8upx;
    height: 28upx;
    background-color: $color-main;
    margin-right: 10upx;
  }
}

// 可选的单个按钮
.uni-label-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  text-align: center;

  .uni-label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 31%;
    height: 80upx;
    background-color: $color-white;
    border: 2upx solid $color-border;
    margin-bottom: 20upx;
    @extend .radius;

    &.uni-label-selected {
      border-color: $color-main;
      color: $color-main;
    }
  }

  // 解决最后一行向左对齐
  &::after {
    content: "";
    display: block;
    width: 31%;
    height: 0;
  }

  // 自动排列
  &.uni-label-list-auto {
    display: block;
    text-align: left;

    .uni-label {
      display: inline-block;
      width: auto;
      min-width: 150upx;
      height: auto;
      padding: 15upx 10upx;
      margin-right: 20upx;
      text-align: center;

      &:last-child {
        margin-right: 0;
      }
    }
  }
}

// 上传按钮
.uni-upload-button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 140upx;
  height: 140upx;
  background-color: $color-active;
}

// 左右带横线的标题
.uni-line-title {
  width: 280upx;
  margin: 0 auto;
  text-align: center;
  font-size: 40upx;
  position: relative;

  &::after,
  &::before {
    content: "";
    width: 40upx;
    height: 4upx;
    border-radius: 8upx;
    background-color: $color-basic;
    position: absolute;
    left: 0;
    top: 50%;
  }

  &::before {
    left: auto;
    right: 0;
  }
}

// 输入框
.uni-input {
  position: relative;
  background-color: $color-white;
  border: 2upx solid $color-border-deep;
  padding: 20upx;
  margin-bottom: 20upx;
  border-radius: 8upx;
  font-family: "icon";

  &::after {
    position: absolute;
    top: 0;
    right: 20upx;
    bottom: 0;
    width: 28upx;
    height: 28upx;
    margin: auto;
  }

  &.uni-input-user {
    &::after {
      content: "\e6a4";
    }
  }

  &.uni-input-password {
    &::after {
      content: "\e62c";
    }
  }

  &.uni-input-tel {
    &::after {
      content: "\e608";
    }
  }

  &.uni-input-email {
    &::after {
      content: "\e60c";
      width: 36upx;
      height: 36upx;
      font-size: 36upx;
    }
  }

  &.uni-input-code {
    padding-right: 200upx;

    .send-btn {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      height: 60upx;
      line-height: 60upx;
      padding: 0 20upx;
    }
  }

  &.uni-input-none-border {
    border: 0;
  }
}
